<template>
  <div class="s-box">
    <!-- 导航 -->
    <van-nav-bar title="我的盲盒" left-text="" class="space-nav" :border="false" :fixed="true" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <!-- 正文 -->
    <div class="s-box-start nav-top">
      <div class="bgimg-1 s-box-start__nav">
        <!-- 选项卡 -->
        <div class="d-flex px-2 justify-content-around">
          <div class="topic-nav" :class=" ntype == '1'?'topic-active':''" @click="nftType(1)">可开启</div>
          <div class="topic-nav " :class=" ntype == '2'?'topic-active':''" @click="nftType(2)">已开启</div>
        </div>

        <div class="container">
          <!-- NFT专题 -->
          <van-config-provider :theme-vars="themeVars">
            <van-list :loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
              <van-cell v-for="item in list" :key="item" :border="false">

                <!-- 可开启 -->
                <div class="bgimg-1 topic-item py-3" v-if="ntype == 1">
                  <van-row>
                    <van-col span="8 py-2">
                      <img src="../assets/img/closedbox.png" class="img-fluid w-75 mx-auto d-block" alt="">
                    </van-col>
                    <van-col span="16" class="d-flex flex-column">
                      <div class="py-2">#HS7765#《曲水流殇.兰亭集序》06</div>
                      <div class="py-2">获得日期：2021/09/03</div>
                      <div class="mt-auto"><button class="btn btn-primary float-end me-3">开启盲盒</button> </div>
                    </van-col>
                  </van-row>
                </div>

                <!-- 已开启 -->
                <div class="bgimg-1 topic-item pt-3 " v-if="ntype == 2">
                  <div class="topic-item__img__status fs-7">售卖中</div>
                  <van-row>
                    <van-col span="8 py-2">
                      <div class="topic-item_opened__img">
                        <img src="../assets/img/opened-n.png" class="img-fluid h-25 mx-auto d-block" alt="">
                      </div>
                    </van-col>
                    <van-col span="16" class="d-flex flex-column">
                      <div class="py-2">#HS7765#《曲水流殇.兰亭集序》06</div>
                      <div class="mt-auto py-2"><span class="fs-3">300</span> su</div>
                      <div class="mt-auto pb-2">编号:N00001</div>
                    </van-col>
                  </van-row>
                </div>

              </van-cell>
            </van-list>
          </van-config-provider>
          <!-- NFT专题 -->
        </div>
      </div>
    </div>
  </div>
</template>   

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
export default {
  setup() {
    const themeVars = {
      cellBackgroundColor: 'transparent',
      cellHorizontalPadding: 0,
    }
    const list = ref([1, 2, 3, 4, 5])
    const loading = ref(false)
    const finished = ref(false)
    const router = useRouter()

    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          // list.value.push([])
        }

        // 加载状态结束
        loading.value = false

        // 数据全部加载完成
        if (list.value.length >= 40) {
          finished.value = true
        }
      }, 1000)
    }

    const state = reactive({
      spaceNavMore: false,
      ntype: 1,
    })
    onMounted(async () => {
      console.log(list)
    })

    const onClickLeft = () => history.back()

    const nftType = (t: number) => {
      state.ntype = t
      console.log(t)
    }
    const toDetail = (id: number) => {
      console.log(id)
      router.push({ path: '/nft-detail', query: { id } })
    }

    return {
      ...toRefs(state),
      themeVars,
      onClickLeft,
      list,
      onLoad,
      loading,
      finished,
      nftType,
      toDetail,
    }
  },
}
</script>

<style lang="scss" scoped>
.topic-nav {
  padding: 0.3em 0;
  margin: 0.5em 1em;
}

.topic-active {
  color: #164ed2;
  border-bottom: 4px solid #164ed2;
}
.topic-item {
  border-radius: 0.5em;
  &__img {
    position: relative;
    &__status {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      padding: 0.15em 0.3em;
      border-top-left-radius: 0.5em;
      border-bottom-right-radius: 0.5em;
      color: #fff;
      background-color: #99bfe9;
      // font-size: 0.8em;
    }

    &__pending {
      background-color: #5481fe;
    }

    &__end {
      background-color: #98989a;
    }
  }
  &_opened__img {
    background: transparent url('../assets/img/openedbox.png') center no-repeat;
    background-size: 80%;
    height: 10em;
    img {
      height: 33% !important;
    }
  }
}
</style>
